import { watch, ref } from 'vue';
import packages, { loadLogo } from '@/service/packages';
import { BaseArray, BaseObject } from '@/types/global';

interface Cate {
  name: string;
  pkgs: BaseArray;
}
const cateList = ref([] as Cate[]);

loadLogo();
watch(packages, () => {
  const list: Cate[] = [];
  const cateMap: BaseObject = {};

  Object.keys(packages).forEach((name) => {
    const { logo, category, title } = packages[name];
    const info = { name, logo, category, title };
    if (cateMap[category]) {
      cateMap[category].pkgs?.push(info);
    } else {
      const cate: Cate = {
        name: category,
        pkgs: [info],
      };
      cateMap[category] = cate;
      list.push(cate);
    }
  });
  cateList.value = list;
});

export default cateList;
